<template>
  <view class="craving-history-container">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-content">
        <text class="page-title">渴求历史</text>
        <text class="page-subtitle">分析你的吸烟冲动模式</text>
      </view>
      
      <!-- 统计概览 -->
      <view class="overview-stats">
        <view class="stat-card">
          <text class="stat-number">{{ totalRecords }}</text>
          <text class="stat-label">总记录数</text>
        </view>
        <view class="stat-card">
          <text class="stat-number">{{ averageIntensity }}</text>
          <text class="stat-label">平均强度</text>
        </view>
        <view class="stat-card">
          <text class="stat-number">{{ recordDays }}</text>
          <text class="stat-label">记录天数</text>
        </view>
      </view>
    </view>

    <!-- 趋势图表 -->
    <view class="chart-section">
      <view class="section-header">
        <text class="section-title">📊 最近趋势</text>
        <view class="chart-period">
          <text 
            class="period-btn" 
            :class="{ active: chartPeriod === 7 }"
            @click="setChartPeriod(7)"
          >7天</text>
          <text 
            class="period-btn" 
            :class="{ active: chartPeriod === 30 }"
            @click="setChartPeriod(30)"
          >30天</text>
        </view>
      </view>
      
      <view class="trend-chart">
        <view v-for="(day, index) in chartData" :key="index" class="chart-bar">
          <view class="bar-info" v-if="day.count > 0">
            <text class="bar-count">{{ day.count }}</text>
            <text class="bar-intensity">{{ day.avgIntensity }}</text>
          </view>
          <view 
            class="bar" 
            :style="{ 
              height: Math.max(4, day.count * 30) + 'rpx',
              backgroundColor: getBarColor(day.avgIntensity)
            }"
          ></view>
          <text class="bar-label">{{ day.label }}</text>
        </view>
      </view>
    </view>

    <!-- 触发因素分析 -->
    <view class="triggers-analysis">
      <text class="section-title">🎯 触发因素分析</text>
      <view class="triggers-chart">
        <view v-for="(item, index) in topTriggers" :key="index" class="trigger-item">
          <view class="trigger-bar">
            <view class="trigger-fill" :style="{ width: (item.count / maxTriggerCount * 100) + '%' }"></view>
          </view>
          <view class="trigger-info">
            <text class="trigger-name">{{ item.trigger }}</text>
            <text class="trigger-count">{{ item.count }}次</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 时间段分析 -->
    <view class="time-analysis">
      <text class="section-title">⏰ 时间段分析</text>
      <view class="time-chart">
        <view v-for="(hour, index) in hourlyData" :key="index" class="hour-bar">
          <view 
            class="hour-fill" 
            :style="{ height: Math.max(4, hour.count * 10) + 'rpx' }"
          ></view>
          <text class="hour-label">{{ hour.hour }}</text>
        </view>
      </view>
    </view>

    <!-- 历史记录列表 -->
    <view class="history-list">
      <view class="section-header">
        <text class="section-title">📋 详细记录</text>
        <view class="list-filters">
          <text 
            class="filter-btn" 
            :class="{ active: recordFilter === 'all' }"
            @click="setRecordFilter('all')"
          >全部</text>
          <text 
            class="filter-btn" 
            :class="{ active: recordFilter === 'high' }"
            @click="setRecordFilter('high')"
          >高强度</text>
          <text 
            class="filter-btn" 
            :class="{ active: recordFilter === 'recent' }"
            @click="setRecordFilter('recent')"
          >最近</text>
        </view>
      </view>

      <view class="records-container">
        <view v-for="(dayData, date) in filteredRecords" :key="date" class="date-group">
          <view class="date-header">
            <text class="date-text">{{ formatDate(date.toString()) }}</text>
            <text class="date-count">{{ dayData.length }}次记录</text>
          </view>
          
          <view class="records-list">
            <view v-for="(record, index) in dayData" :key="index" class="record-card">
              <view class="record-header">
                <text class="record-time">{{ record.time }}</text>
                <view class="intensity-badge" :class="'level-' + getIntensityLevel(record.intensity)">
                  {{ record.intensity }}
                </view>
              </view>
              
              <view class="record-triggers">
                <text v-for="trigger in record.triggers" :key="trigger" class="trigger-chip">
                  {{ trigger }}
                </text>
              </view>
              
              <text v-if="record.note" class="record-note">{{ record.note }}</text>
            </view>
          </view>
        </view>
        
        <view v-if="Object.keys(filteredRecords).length === 0" class="empty-state">
          <text class="empty-icon">📝</text>
          <text class="empty-text">暂无记录</text>
          <text class="empty-desc">开始记录你的渴求情况，分析改善模式</text>
        </view>
      </view>
    </view>

    <!-- 快速记录按钮 -->
    <view class="quick-record-fab" @click="showModal = true">
      <text class="fab-icon">+</text>
    </view>

    <!-- 模态框 -->
    <view class="modal" v-if="showModal" @click="showModal = false">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">渴求记录</text>
          <view class="close-btn" @click="showModal = false">✕</view>
        </view>
        <view class="modal-body">

          <!-- 渴求记录内容 -->
          <view class="craving-tracker">
            <!-- 快速记录按钮 -->
            <view class="quick-record">
              <text class="section-title">🚀 快速记录</text>
              <view class="quick-buttons">
                <button class="quick-btn low" @click="quickRecordCraving(3)">轻微 (3)</button>
                <button class="quick-btn medium" @click="quickRecordCraving(6)">中等 (6)</button>
                <button class="quick-btn high" @click="quickRecordCraving(9)">强烈 (9)</button>
              </view>
            </view>

            <!-- 今日统计 -->
            <view class="today-stats" v-if="todaysCravings.length > 0">
              <text class="section-title">📊 今日统计</text>
              <view class="stats-summary">
                <view class="stat-item">
                  <text class="stat-number">{{ todaysCravings.length }}</text>
                  <text class="stat-label">次记录</text>
                </view>
                <view class="stat-item">
                  <text class="stat-number">{{ Math.round(todaysCravings.reduce((sum, r) => sum + r.intensity, 0) / todaysCravings.length) }}</text>
                  <text class="stat-label">平均强度</text>
                </view>
              </view>
            </view>

            <!-- 详细记录表单 -->
            <view class="detailed-form">
              <text class="section-title">📝 详细记录</text>
              
              <!-- 渴求强度 -->
              <view class="form-item">
                <text class="form-label">渴求强度 ({{ cravingIntensity }}/10)</text>
                <slider :value="cravingIntensity" @change="onIntensityChange" min="1" max="10" 
                  activeColor="#667eea" backgroundColor="#f0f0f0" />
                <view class="intensity-labels">
                  <text class="intensity-label">轻微</text>
                  <text class="intensity-label">中等</text>
                  <text class="intensity-label">强烈</text>
                </view>
              </view>

              <!-- 触发因素选择 -->
              <view class="form-item">
                <text class="form-label">触发因素 ({{ selectedTriggers.length }}/{{ availableTriggers.length }})</text>
                <view class="triggers-grid">
                  <view 
                    v-for="trigger in availableTriggers" 
                    :key="trigger"
                    class="trigger-tag"
                    :class="{ active: selectedTriggers.includes(trigger) }"
                    @click="toggleTrigger(trigger)"
                  >
                    {{ trigger }}
                  </view>
                  <view 
                    class="trigger-tag custom" 
                    @click="showTriggerInput = true"
                    v-if="!showTriggerInput"
                  >
                    + 自定义
                  </view>
                </view>
                
                <!-- 自定义触发因素输入 -->
                <view v-if="showTriggerInput" class="custom-trigger-input">
                  <input 
                    v-model="customTrigger" 
                    placeholder="输入自定义触发因素"
                    @confirm="addCustomTrigger"
                    class="custom-input"
                  />
                  <view class="input-actions">
                    <button class="btn-small btn-primary" @click="addCustomTrigger">添加</button>
                    <button class="btn-small btn-cancel" @click="showTriggerInput = false">取消</button>
                  </view>
                </view>
              </view>

              <!-- 备注 -->
              <view class="form-item">
                <text class="form-label">备注 (可选)</text>
                <textarea 
                  v-model="currentCravingNote" 
                  placeholder="记录当时的情况、感受或想法..."
                  class="note-textarea"
                  maxlength="200"
                />
              </view>

              <!-- 提交按钮 -->
              <button class="btn btn-primary full-width" @click="recordCraving">
                保存记录
              </button>
            </view>

            <!-- 应对策略推荐 -->
            <view class="strategies" v-if="currentStrategies.length > 0">
              <text class="section-title">💡 应对策略推荐</text>
              <view class="strategy-list">
                <view v-for="(strategy, index) in currentStrategies" :key="index" class="strategy-item">
                  <text class="strategy-icon">{{ strategy.icon }}</text>
                  <view class="strategy-content">
                    <text class="strategy-title">{{ strategy.title }}</text>
                    <text class="strategy-desc">{{ strategy.description }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useSmokingHistoryStore } from '@/store/smokingHistory'
import { storeToRefs } from 'pinia'
import type { CravingRecord } from '@/types/global'

const smokingStore = useSmokingHistoryStore()
const { cravingRecords } = storeToRefs(smokingStore)

// 响应式数据
const chartPeriod = ref<number>(7)
const recordFilter = ref<string>('all')
const showModal = ref(false)
// 渴求记录相关数据
const cravingIntensity = ref<number>(5)
const selectedTriggers = ref<string[]>([])
const customTrigger = ref<string>('')
const showTriggerInput = ref<boolean>(false)
const currentCravingNote = ref<string>('')

// 计算属性
const totalRecords = computed(() => {
  return Object.values(cravingRecords.value).flat().length
})

const averageIntensity = computed(() => {
  const allRecords = Object.values(cravingRecords.value).flat()
  if (allRecords.length === 0) return 0
  const sum = allRecords.reduce((acc, record) => acc + record.intensity, 0)
  return Math.round(sum / allRecords.length)
})

const recordDays = computed(() => {
  return Object.keys(cravingRecords.value).length
})

// 图表数据
const chartData = computed(() => {
  const data = []
  for (let i = chartPeriod.value - 1; i >= 0; i--) {
    const date = new Date()
    date.setDate(date.getDate() - i)
    const dateStr = date.toISOString().split('T')[0]
    const dayRecords = cravingRecords.value[dateStr] || []
    
    data.push({
      date: dateStr,
      label: i === 0 ? '今' : i === 1 ? '昨' : date.getDate().toString(),
      count: dayRecords.length,
      avgIntensity: dayRecords.length > 0 
        ? Math.round(dayRecords.reduce((sum, r) => sum + r.intensity, 0) / dayRecords.length)
        : 0
    })
  }
  return data
})

// 触发因素统计
const topTriggers = computed(() => {
  const triggerCount: { [key: string]: number } = {}
  Object.values(cravingRecords.value).flat().forEach(record => {
    record.triggers.forEach(trigger => {
      triggerCount[trigger] = (triggerCount[trigger] || 0) + 1
    })
  })
  
  return Object.entries(triggerCount)
    .sort(([, a], [, b]) => b - a)
    .slice(0, 8)
    .map(([trigger, count]) => ({ trigger, count }))
})

const maxTriggerCount = computed(() => {
  return Math.max(...topTriggers.value.map(item => item.count), 1)
})

// 时间段分析
const hourlyData = computed(() => {
  const hours = Array.from({ length: 24 }, (_, i) => ({ hour: i, count: 0 }))
  
  Object.values(cravingRecords.value).flat().forEach(record => {
    const hour = parseInt(record.time.split(':')[0])
    hours[hour].count++
  })
  
  return hours.map(item => ({
    hour: item.hour.toString().padStart(2, '0'),
    count: item.count
  }))
})

// 过滤后的记录
const filteredRecords = computed(() => {
  let records = { ...cravingRecords.value }
  
  if (recordFilter.value === 'high') {
    // 只显示强度 >= 7 的记录
    const filtered: any = {}
    Object.entries(records).forEach(([date, dayRecords]) => {
      const highIntensityRecords = dayRecords.filter(record => record.intensity >= 7)
      if (highIntensityRecords.length > 0) {
        filtered[date] = highIntensityRecords
      }
    })
    records = filtered
  } else if (recordFilter.value === 'recent') {
    // 只显示最近7天的记录
    const recentDates: string[] = []
    for (let i = 0; i < 7; i++) {
      const date = new Date()
      date.setDate(date.getDate() - i)
      recentDates.push(date.toISOString().split('T')[0])
    }
    
    const filtered: any = {}
    Object.entries(records).forEach(([date, dayRecords]) => {
      if (recentDates.includes(date)) {
        filtered[date] = dayRecords
      }
    })
    records = filtered
  }
  
  return records
})

// 可选的触发因素
const availableTriggers = [
  '压力/焦虑', '无聊', '喝酒', '看到别人吸烟', '工作间隙',
  '饭后', '驾驶时', '社交场合', '情绪低落', '习惯性动作',
  '咖啡时光', '电话通话', '等待时间', '特定地点', '特定时间'
]

// 应对策略数据
const copingStrategies = [
  {
    trigger: '压力/焦虑',
    strategies: [
      { icon: '🌬️', title: '深呼吸', description: '进行4-7-8呼吸法缓解压力' },
      { icon: '🚶', title: '短暂走动', description: '离开压力环境，走走5分钟' },
      { icon: '💭', title: '正念冥想', description: '专注当下，观察自己的想法' }
    ]
  },
  {
    trigger: '无聊',
    strategies: [
      { icon: '📱', title: '转移注意力', description: '玩游戏、看视频或听音乐' },
      { icon: '🏃', title: '运动', description: '做一些简单的运动或伸展' },
      { icon: '📚', title: '学习新技能', description: '看书、学习或做手工' }
    ]
  },
  {
    trigger: '饭后',
    strategies: [
      { icon: '🦷', title: '刷牙', description: '立即刷牙，清新口气' },
      { icon: '🍃', title: '嚼口香糖', description: '用薄荷口香糖替代吸烟' },
      { icon: '🚶', title: '饭后散步', description: '出去走走，帮助消化' }
    ]
  }
]

// 计算今日渴求记录
const todaysCravings = computed(() => {
  const today = new Date().toISOString().split('T')[0]
  return cravingRecords.value[today] || []
})

// 计算近7天渴求趋势
const weeklyTrend = computed(() => {
  const trend = []
  for (let i = 6; i >= 0; i--) {
    const date = new Date()
    date.setDate(date.getDate() - i)
    const dateStr = date.toISOString().split('T')[0]
    const dayRecords = cravingRecords.value[dateStr] || []
    trend.push({
      date: dateStr,
      label: i === 0 ? '今天' : `${i}天前`,
      count: dayRecords.length,
      avgIntensity: dayRecords.length > 0 
        ? Math.round(dayRecords.reduce((sum, r) => sum + r.intensity, 0) / dayRecords.length)
        : 0
    })
  }
  return trend
})

// 获取当前选中触发因素的应对策略
const currentStrategies = computed(() => {
  if (selectedTriggers.value.length === 0) return []
  
  const mainTrigger = selectedTriggers.value[0]
  const strategySet = copingStrategies.find(s => s.trigger === mainTrigger)
  return strategySet?.strategies || [
    { icon: '🌬️', title: '深呼吸', description: '缓慢深呼吸，平复心情' },
    { icon: '💧', title: '喝水', description: '喝一大杯水，转移注意力' },
    { icon: '📱', title: '联系朋友', description: '和朋友聊天，获得支持' }
  ]
})

// 方法
// 渴求记录相关
const onIntensityChange = (e: { detail: { value: number } }) => {
  cravingIntensity.value = e.detail.value
}

const quickRecordCraving = (intensity: number) => {
  const record: CravingRecord = {
    time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
    intensity,
    triggers: ['快速记录'],
    timestamp: new Date().toISOString()
  }
  
  smokingStore.addCravingRecord(record)
  
  uni.showToast({
    title: `记录成功 (强度: ${intensity})`,
    icon: 'success'
  })
}

// 触发因素相关方法
const toggleTrigger = (trigger: string) => {
  const index = selectedTriggers.value.indexOf(trigger)
  if (index > -1) {
    selectedTriggers.value.splice(index, 1)
  } else {
    selectedTriggers.value.push(trigger)
  }
}

const addCustomTrigger = () => {
  if (customTrigger.value.trim()) {
    selectedTriggers.value.push(customTrigger.value.trim())
    customTrigger.value = ''
    showTriggerInput.value = false
  }
}

const setChartPeriod = (period: number) => {
  chartPeriod.value = period
}

const setRecordFilter = (filter: string) => {
  recordFilter.value = filter
}

const getBarColor = (intensity: number) => {
  if (intensity >= 7) return '#f44336'
  if (intensity >= 4) return '#ff9800'
  return '#4caf50'
}

const getIntensityLevel = (intensity: number) => {
  return Math.ceil(intensity / 3.34)
}

const formatDate = (dateStr: string) => {
  const date = new Date(dateStr)
  const today = new Date()
  const yesterday = new Date(today)
  yesterday.setDate(yesterday.getDate() - 1)
  
  if (dateStr === today.toISOString().split('T')[0]) {
    return '今天'
  } else if (dateStr === yesterday.toISOString().split('T')[0]) {
    return '昨天'
  } else {
    return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
  }
}

const recordCraving = () => {
  if (selectedTriggers.value.length === 0) {
    uni.showToast({
      title: '请选择至少一个触发因素',
      icon: 'none'
    })
    return
  }
  
  const record: CravingRecord = {
    time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
    intensity: cravingIntensity.value,
    triggers: [...selectedTriggers.value],
    timestamp: new Date().toISOString()
  }
  
  if (currentCravingNote.value.trim()) {
    record.note = currentCravingNote.value.trim()
  }
  
  smokingStore.addCravingRecord(record)
  
  // 重置表单
  selectedTriggers.value = []
  currentCravingNote.value = ''
  cravingIntensity.value = 5
  showModal.value = false
  uni.showToast({
    title: '渴求记录已保存',
    icon: 'success'
  })
}
</script>

<style lang="scss" scoped>
.craving-history-container {
  padding: 20rpx;
  padding-bottom: 120rpx;
}

.page-header {
  margin-bottom: 30rpx;
  
  .header-content {
    text-align: center;
    margin-bottom: 30rpx;
    
    .page-title {
      display: block;
      font-size: 48rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .page-subtitle {
      font-size: 26rpx;
      color: #666;
    }
  }
  
  .overview-stats {
    display: flex;
    gap: 20rpx;
    
    .stat-card {
      flex: 1;
      padding: 30rpx 20rpx;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 16rpx;
      text-align: center;
      
      .stat-number {
        display: block;
        font-size: 36rpx;
        font-weight: 600;
        color: #fff;
        margin-bottom: 8rpx;
      }
      
      .stat-label {
        font-size: 22rpx;
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
}

.chart-section {
  margin-bottom: 30rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
    }
    
    .chart-period {
      display: flex;
      gap: 10rpx;
      
      .period-btn {
        padding: 8rpx 16rpx;
        border-radius: 16rpx;
        font-size: 22rpx;
        background: #f5f5f5;
        color: #666;
        
        &.active {
          background: #667eea;
          color: #fff;
        }
      }
    }
  }
  
  .trend-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 180rpx;
    padding: 20rpx;
    background: #f8f9fa;
    border-radius: 16rpx;
    
    .chart-bar {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      
      .bar-info {
        position: absolute;
        top: -50rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .bar-count {
          font-size: 20rpx;
          color: #333;
          font-weight: 600;
        }
        
        .bar-intensity {
          font-size: 16rpx;
          color: #999;
        }
      }
      
      .bar {
        width: 24rpx;
        border-radius: 12rpx;
        margin-bottom: 10rpx;
        min-height: 4rpx;
      }
      
      .bar-label {
        font-size: 20rpx;
        color: #999;
      }
    }
  }
}

.triggers-analysis, .time-analysis {
  margin-bottom: 30rpx;
  
  .section-title {
    display: block;
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .triggers-chart {
    .trigger-item {
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;
      
      .trigger-bar {
        flex: 1;
        height: 24rpx;
        background: #f0f0f0;
        border-radius: 12rpx;
        overflow: hidden;
        margin-right: 15rpx;
        
        .trigger-fill {
          height: 100%;
          background: #667eea;
          border-radius: 12rpx;
          transition: width 0.3s ease;
        }
      }
      
      .trigger-info {
        min-width: 120rpx;
        text-align: right;
        
        .trigger-name {
          display: block;
          font-size: 22rpx;
          color: #333;
        }
        
        .trigger-count {
          font-size: 18rpx;
          color: #667eea;
        }
      }
    }
  }
  
  .time-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 120rpx;
    padding: 20rpx;
    background: #f8f9fa;
    border-radius: 16rpx;
    overflow-x: auto;
    
    .hour-bar {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 8rpx;
      
      .hour-fill {
        width: 16rpx;
        background: #667eea;
        border-radius: 8rpx;
        margin-bottom: 8rpx;
        min-height: 4rpx;
      }
      
      .hour-label {
        font-size: 16rpx;
        color: #999;
      }
    }
  }
}

.history-list {
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
    }
    
    .list-filters {
      display: flex;
      gap: 10rpx;
      
      .filter-btn {
        padding: 8rpx 16rpx;
        border-radius: 16rpx;
        font-size: 22rpx;
        background: #f5f5f5;
        color: #666;
        
        &.active {
          background: #667eea;
          color: #fff;
        }
      }
    }
  }
  
  .records-container {
    .date-group {
      margin-bottom: 30rpx;
      
      .date-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15rpx 0;
        border-bottom: 2rpx solid #f0f0f0;
        margin-bottom: 15rpx;
        
        .date-text {
          font-size: 24rpx;
          font-weight: 500;
          color: #333;
        }
        
        .date-count {
          font-size: 20rpx;
          color: #667eea;
          background: #f0f4ff;
          padding: 6rpx 12rpx;
          border-radius: 12rpx;
        }
      }
      
      .records-list {
        .record-card {
          padding: 20rpx;
          background: #fff;
          border: 1rpx solid #e0e0e0;
          border-radius: 12rpx;
          margin-bottom: 15rpx;
          
          .record-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12rpx;
            
            .record-time {
              font-size: 22rpx;
              color: #666;
            }
            
            .intensity-badge {
              padding: 6rpx 12rpx;
              border-radius: 12rpx;
              font-size: 20rpx;
              font-weight: 500;
              
              &.level-1 {
                background: #e8f5e8;
                color: #4caf50;
              }
              
              &.level-2 {
                background: #fff3e0;
                color: #ff9800;
              }
              
              &.level-3 {
                background: #ffebee;
                color: #f44336;
              }
            }
          }
          
          .record-triggers {
            margin-bottom: 12rpx;
            
            .trigger-chip {
              display: inline-block;
              padding: 6rpx 12rpx;
              background: #f0f4ff;
              color: #667eea;
              border-radius: 12rpx;
              font-size: 18rpx;
              margin-right: 8rpx;
              margin-bottom: 8rpx;
            }
          }
          
          .record-note {
            font-size: 22rpx;
            color: #666;
            line-height: 1.5;
            font-style: italic;
          }
        }
      }
    }
    
    .empty-state {
      text-align: center;
      padding: 80rpx 20rpx;
      
      .empty-icon {
        display: block;
        font-size: 80rpx;
        margin-bottom: 20rpx;
      }
      
      .empty-text {
        display: block;
        font-size: 28rpx;
        color: #999;
        margin-bottom: 10rpx;
      }
      
      .empty-desc {
        font-size: 22rpx;
        color: #ccc;
      }
    }
  }
}

.quick-record-fab {
  position: fixed;
  right: 30rpx;
  bottom: 100rpx;
  width: 100rpx;
  height: 100rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
  
  .fab-icon {
    font-size: 48rpx;
    color: #fff;
    font-weight: 300;
  }
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.modal-content {
  width: 600rpx;
  max-height: 80vh;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .modal-title {
    font-size: 32rpx;
    font-weight: 600;
  }

  .close-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5f5f5;
    font-size: 24rpx;
  }
}

.modal-body {
  padding: 30rpx;
  max-height: 60vh;
  overflow-y: auto;
}
// 渴求记录样式
.craving-form {
  .form-item {
    margin-bottom: 30rpx;

    .form-label {
      display: block;
      font-size: 26rpx;
      margin-bottom: 15rpx;
      font-weight: 500;
    }
  }
}

// 新增渴求记录样式
.quick-record {
  margin-bottom: 30rpx;
  
  .section-title {
    display: block;
    font-size: 28rpx;
    font-weight: 600;
    margin-bottom: 15rpx;
    color: #333;
  }
  
  .quick-buttons {
    display: flex;
    gap: 15rpx;
    
    .quick-btn {
      flex: 1;
      padding: 20rpx;
      border-radius: 12rpx;
      border: none;
      font-size: 24rpx;
      font-weight: 500;
      
      &.low {
        background: #e8f5e8;
        color: #4caf50;
      }
      
      &.medium {
        background: #fff3e0;
        color: #ff9800;
      }
      
      &.high {
        background: #ffebee;
        color: #f44336;
      }
    }
  }
}
.today-stats {
  margin-bottom: 30rpx;
  
  .stats-summary {
    display: flex;
    gap: 30rpx;
    
    .stat-item {
      text-align: center;
      
      .stat-number {
        display: block;
        font-size: 36rpx;
        font-weight: 600;
        color: #667eea;
        margin-bottom: 5rpx;
      }
      
      .stat-label {
        font-size: 22rpx;
        color: #666;
      }
    }
  }
}

.detailed-form {
  margin-bottom: 30rpx;
  
  .intensity-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10rpx;
    
    .intensity-label {
      font-size: 20rpx;
      color: #999;
    }
  }
  
  .triggers-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
    margin-top: 15rpx;
    
    .trigger-tag {
      padding: 12rpx 20rpx;
      border-radius: 20rpx;
      background: #f5f5f5;
      font-size: 22rpx;
      color: #666;
      border: 2rpx solid transparent;
      transition: all 0.3s ease;
      
      &.active {
        background: #667eea;
        color: #fff;
      }
      
      &.custom {
        background: #e3f2fd;
        color: #2196f3;
        border: 2rpx dashed #2196f3;
      }
    }
  }
  
  .custom-trigger-input {
    margin-top: 15rpx;
    
    .custom-input {
      width: 100%;
      padding: 15rpx;
      border: 2rpx solid #e0e0e0;
      border-radius: 8rpx;
      font-size: 24rpx;
      margin-bottom: 15rpx;
    }
    
    .input-actions {
      display: flex;
      gap: 15rpx;
      
      .btn-small {
        padding: 12rpx 20rpx;
        border-radius: 8rpx;
        font-size: 22rpx;
        border: none;
        
        &.btn-primary {
          background: #667eea;
          color: #fff;
        }
        
        &.btn-cancel {
          background: #f5f5f5;
          color: #666;
        }
      }
    }
  }
  
  .note-textarea {
    width: 100%;
    min-height: 120rpx;
    padding: 15rpx;
    border: 2rpx solid #e0e0e0;
    border-radius: 8rpx;
    font-size: 24rpx;
    resize: none;
  }
  
  .full-width {
    width: 100%;
    margin-top: 20rpx;
  }
}
.strategies {
  margin-bottom: 30rpx;
  
  .strategy-list {
    .strategy-item {
      display: flex;
      align-items: center;
      padding: 20rpx;
      background: #f8f9fa;
      border-radius: 12rpx;
      margin-bottom: 15rpx;
      
      .strategy-icon {
        font-size: 32rpx;
        margin-right: 15rpx;
      }
      
      .strategy-content {
        flex: 1;
        
        .strategy-title {
          display: block;
          font-size: 26rpx;
          font-weight: 500;
          margin-bottom: 5rpx;
        }
        
        .strategy-desc {
          font-size: 22rpx;
          color: #666;
        }
      }
    }
  }
}
</style>